<template>
	<view class="flex-col page">

		<view class="flex-col group">
			<view class="flex-col">
				<u-form>
					<u-form-item label="姓名" prop="realname" borderBottom ref="item1" labelWidth='80'>
						<u--input v-model="realname" border="none" placeholder="请输入姓名"> </u--input>
					</u-form-item>
					<u-form-item label="手机号" prop="mobile" borderBottom ref="item1" labelWidth='80'>
						<u--input v-model="mobile" border="none" type="number" placeholder="请输入手机号"> </u--input>
					</u-form-item>

					<!-- showCity  gdLcation-->
					<u-form-item @click="showCity" label="服务地址" prop="district" borderBottom ref="item1"
						labelWidth='80'>
						<u--input @click="showCity" v-model="districts" border="none" placeholder="请选择您的地址" disabled
							disabledColor="#FFFFFF"> </u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
					<!-- 被修改的地方 -->
					<!-- 	<u-form-item  label="服务地址" prop="district" borderBottom ref="item1" labelWidth='80'>
						<u--input v-model="districts" border="none" placeholder="请选择您的地址" 
							disabledColor="#FFFFFF"> </u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item> -->


					<u-form-item label="门牌号" prop="address" borderBottom ref="item1" labelWidth='80'>
						<u--input v-model="address" border="none" placeholder="某酒店/XX房间(小区XX号)" disabledColor="#FFFFFF">
						</u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>
				</u-form>
				<view class="justify-between group_5">
					<text class="text_11">设为默认地址</text>
					<u-switch v-model="is_default" activeColor="#5ac725"></u-switch>
				</view>
			</view>
			<view class="flex-col group_6">
				<view class="flex-col items-center button" @click="save()">
					<text>保存</text>
				</view>
				<view class="flex-col items-center button_1" @click="cancel()" v-if="addressId">
					<text v-if="addressId">删除</text>
				</view>
			</view>
		</view>
		<amap-choose :color="color" :keyMap="keyMap" :AMapKeyWeb="AMapKeyWeb" :show="show" :initLocation="initLocation"
			@placeChoose="placeChoose" @changeShow="changeShow"></amap-choose>
		<Flame-chooseLocation v-model="cityshow" mapkey="XIKBZ-INHKI-FOPGM-URZ5L-FLXZE-DPBVR" @confirm="confirm1">
		</Flame-chooseLocation>
	</view>
</template>

<script>
import {
	setLatLng
} from '@/config/utils'
export default {
	data () {
		return {
			realname: '',
			mobile: '',
			district: '',
			address: '',
			is_default: false,
			location: '',
			districts: '',
			addressId: '',
			lat: '',
			lng: '',
			id: "",
			cityshow: false,
			color: '#5406CD',
			keyMap: 'caf65de51c59936a84ea12706e2c4e88',
			AMapKeyWeb: '6cefd01fa67abc687932168c01236bc8',
			show: false,
			initLocation: '113.663221,34.7568711',
			address: ''
		};
	},
	onLoad: function (options) {
		console.log(options)
		this.addressId = options.id ? Number(options.id) : '';
		if (options.id) {
			uni.setNavigationBarTitle({
				title: '编辑地址'
			});

			this.init();

		} else {
			uni.setNavigationBarTitle({
				title: '添加地址'
			});

		}

	},
	methods: {
		init () {
			this.$http.post('api/user/address/detail', {
				id: this.addressId
			}).then(res => {
				// console.log(res)
				// for (let i in res) {
				// 	this[i] = res[i];
				// }
				// this.is_default = Boolean(this.is_default);
				// this.districts = this.province + this.city + this.district;
				this.realname = res.username
				this.mobile = res.mobile
				this.province = res.province
				this.city = res.city
				this.district = res.district
				this.address = res.address
				this.is_default = Boolean(res.is_default);
				this.lat = res.latitude
				this.lng = res.longitude
				this.initLocation = res.longitude + ',' + res.latitude
				this.districts = this.province + this.city + this.district;
				console.log('this.initLocation', this.initLocation)
			})
		},
		showCity () {
			// uni.chooseLocation({
			// 	success: (res) => {
			// 		console.log(res)
			// 		this.districts = res.address;
			// 		let reg = /.+?(省|市|自治区|自治州|镇|县|区)/g;
			// 		let arr = this.districts.match(reg);
			// 		console.log(arr)
			// 		this.province = arr[0];
			// 		this.city = arr[1];
			// 		if (arr[2]) {
			// 			this.district = arr[2];
			// 		} else {
			// 			this.district = arr[1];
			// 		}

			// 		this.address = res.name
			// 		this.districts = this.province + this.city + this.district;
			// 		this.lat = res.latitude;
			// 		this.lng = res.longitude;
			// 	}
			// })
			this.cityshow = true
			// // this.$refs.mpvueCityPicker.show();
		},
		onChange () {},
		onCancel () {},
		onConfirm (e) {
			let arr = e.label.split('-');
			let province = arr[0];
			let city = arr[1];
			let district = arr[2];
			this.province = province;
			this.city = city;
			this.district = district;
			this.districts = `${province}${city}${district}`;
			setLatLng(`${province}${city}${district}`).then(res => {
				console.log(res)
			})
		},
		confirm1 (val) {
			this.lat = val.location.lat;
			this.lng = val.location.lng;
			// 		this.address = res.name
			// 		this.districts = this.province + this.city + this.district;
			// 		this.lat = res.latitude;
			// 		this.lng = res.longitude;
			console.log(val, 'valvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalvalval');
			// this.selectLocatin = val

			if (val.ad_info) {
				this.province = val.ad_info.province
				this.city = val.ad_info.city
				this.district = val.ad_info.district
				// this.districts = val.ad_info.district
				this.districts = val.address + val.title
			}
			else {
				this.province = val.province
				this.city = val.city
				this.district = val.district
				this.districts = val.address + val.title
			}
		},
		save () {
			if (!this.realname) {
				uni.showToast({
					icon: 'none',
					title: '请输入姓名'
				})
				return;
			}
			if (!this.mobile) {
				uni.showToast({
					icon: 'none',
					title: '请输入手机号'
				})
				return;
			}
			if (!this.district) {
				// uni.showToast({
				// 	icon:'none',
				// 	title:'请输入服务地址'
				// })
				// return;
			}
			if (!this.address) {
				uni.showToast({
					icon: 'none',
					title: '请输入门牌号'
				})
				return;
			}
			let obj = {
				id: 0,
				username: this.realname,
				mobile: this.mobile,
				province: this.province,
				city: this.city,
				district: this.district,
				address: this.address,
				is_default: Number(this.is_default),
				latitude: this.lat,
				longitude: this.lng,
			}
			console.log(obj)
			if (this.addressId) {
				obj.id = this.addressId;
			};
			console.log(obj.id)
			if (obj.id == 0) {
				console.log(obj, '*****');
				let address = this.$http.post('api/user/address/add', obj);
			} else {
				let address = this.$http.post('api/user/address/update', obj);
			}

			let title = this.addressId ? '编辑成功' : '新增成功';
			uni.showToast({
				icon: 'success',
				title
			});
			uni.$emit('change', {
				isUpData: true,
			})
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1000)
		},
		cancel () {
			uni.showModal({
				title: "",
				content: '是否确认删除此地址？',
				success: (res) => {
					if (res.confirm) {
						this.$http.post('api/user/address/delete', {
							id: this.addressId
						}).then(res => {
							console.log(res)
							uni.showToast({
								icon: 'success',
								title: '删除成功',
								success: (res) => {
									uni.$emit('change', {
										isUpData: true,
									})
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										})
									}, 1000)
								}
							})
						})
					}
				}
			})
		},

		gdLcation () {
			this.show = true
		},
		placeChoose (val) {
			console.log(val, '///////')
			this.districts = val.address
			let reg = /.+?(省|市|自治区|自治州|镇|县|区)/g;
			let arr = this.districts.match(reg);
			this.city = arr[1]
			this.district = arr[2]
			this.province = arr[0]
			this.lat = val.latitude;
			this.lng = val.longitude;
			console.log(val.longitude, '///////')
			this.show = false
		},
		changeShow (val) {
			console.log(val)
		}
	}
};
</script>

<style scoped lang="scss">
.page {
	background-color: #ffffff;
	width: 100%;
	height: 100%;


	.group {
		padding: 0 30rpx 628rpx;
		flex: 1 1 auto;


		.group_6 {
			margin-top: 80rpx;
			padding-left: 66rpx;
			padding-right: 64rpx;

			.button {
				padding: 26rpx 0;
				color: rgb(255, 255, 255);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
				background-color: rgb(24, 181, 103);
				border-radius: 48rpx;
			}

			.button_1 {
				margin-top: 40rpx;
				padding: 26rpx 0;
				color: rgb(153, 153, 153);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
				background-color: rgb(244, 244, 244);
				border-radius: 48rpx;
			}
		}

		.group_2 {
			padding: 30rpx 2rpx 26rpx;
			border-bottom: solid 2rpx rgba(0, 0, 0, 0.06);

			.text_1 {
				color: rgb(0, 0, 0);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
			}

			.text_3 {
				color: rgb(80, 80, 80);
				font-size: 32rpx;
				line-height: 44rpx;
				white-space: nowrap;
			}

			.text_4 {
				margin-left: 96rpx;
			}

			.text_6 {
				margin-left: 64rpx;
			}
		}

		.group_3 {
			padding: 30rpx 2rpx 26rpx;
			border-bottom: solid 2rpx rgba(0, 0, 0, 0.06);
			position: relative;

			.text_7 {
				color: rgb(0, 0, 0);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
				position: absolute;
				left: 2rpx;
				top: 50%;
				transform: translateY(-50%);
			}

			.text_8 {
				color: rgb(80, 80, 80);
				font-size: 32rpx;
				line-height: 44rpx;
				white-space: nowrap;
			}
		}

		.group_4 {
			padding: 30rpx 2rpx 28rpx;
			border-bottom: solid 2rpx rgba(0, 0, 0, 0.06);

			.text_9 {
				color: rgb(0, 0, 0);
				font-size: 32rpx;
				font-weight: 500;
				line-height: 44rpx;
				white-space: nowrap;
			}

			.text_10 {
				margin-left: 64rpx;
				color: rgb(80, 80, 80);
				font-size: 32rpx;
				line-height: 44rpx;
				white-space: nowrap;
			}
		}

		.group_5 {
			padding: 24rpx 2rpx;
			color: rgb(0, 0, 0);
			font-size: 26rpx;
			font-weight: 500;
			line-height: 44rpx;
			white-space: nowrap;

			.text_11 {
				margin: 4rpx 0;
			}

			.switch {
				border-radius: 26rpx;
				width: 96rpx;
				height: 52rpx;
			}
		}
	}
}
</style>